<!doctype html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport"
		content="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>业务佣金收入明细</title>
	<style type="text/css">
		[v-cloak] {
			display: none;
		}

		header {
			padding: 7px 0;
			text-align: center;
			background-color: #f8f8f8;
		}

		ul {
			background-color: #fff;
			padding-left: 0.1rem;
		}

		ul>li {
			border-bottom: 1px solid #eee;
			padding: 5px 0;
		}

		ul>li>.row {
			padding: 2px 5px;
			display: flex;
		}

		ul>li>.row>.lt {
			flex: 1;
		}

		ul>li>.row>.rt {
			flex: 2;
			text-align: right;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak>
		<header class="grey">{{ details.desc }} 共{{ details.count }}条开卡佣金</header>
		<ul>
			<li v-for="todo in details.list">
				<div class="row">
					<div class="lt">{{ type == 1 ? '开卡时间' : '制卡时间' }}</div>
					<div class="rt">{{ getDateTime(todo.time)[6] }}</div>
				</div>
				<div class="row">
					<div class="lt">开卡号码</div>
					<div class="rt">{{ phoneFormat(todo.phone) }}</div>
				</div>
				<div class="row">
					<div class="lt">选号费/返佣</div>
					<div class="rt">{{ numberFormat(todo.selFee) }}/<span
							class="yellow">{{ numberFormat(todo.selIncome) }}</span></div>
				</div>
				<div class="row">
					<div class="lt">预存/返佣</div>
					<div class="rt">{{ numberFormat(todo.preFee) }}/<span
							class="yellow">{{ numberFormat(todo.preIncome) }}</span></div>
				</div>
			</li>
		</ul>

	</div>
	<!-- CDN加载Vue库 -->
	<script src="https://cdn.bootcss.com/vue/2.1.5/vue.min.js" type="text/javascript"></script>
</body>

</html>